<template>
  <view class="padding-sm">
    <!-- 操作条 -->
    <view class="app-header">
      <view class="cu-bar bg-white">
        <view class="action">
          <text class="cuIcon-title text-cyan"></text>
          <text class="text-xl text-bold">我的随访</text>
        </view>
      </view>
      <!-- 索引条 -->
      <ill-sub @clickSub="changeSub" ref="mySub"></ill-sub>
    </view>

    <!-- 随访列表 -->
    <view class="visit-list">
      <uni-section title="随访记录">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <empty-page v-if="!visitList || visitList.length <= 0" container-height="100px" text="无随访信息" />
        <uni-collapse v-else>
          <uni-collapse-item v-for="(item, index) in visitList" :key="item.id" :title="item.visitTitle ">
            <view class="content padding-left padding-bottom padding-right">
              <view class="content-container">
                <text class="text-title">发起医生：</text>
                <text class="text-content">{{item.doctorName}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">随访轮次：</text>
                <text class="text-content">第 {{ item.visitCount }} 次</text>
              </view>
              <view class="content-container">
                <text class="text-title">发起时间：</text>
                <text class="text-content">{{ item.createTime }}</text>
              </view>
              <view class="content-container">
                <text class="text-title">完成状态：</text>
                <view class="padding-xs" v-if="item.visitStatus === 0">
                  <view class='cu-tag light bg-red'>未完成</view>
                </view>
                <view class="padding-xs" v-else>
                  <view class='cu-tag light bg-green'>已完成</view>
                </view>
              </view>
              <!-- 随访进度 -->
              <view class="content-container">
                <text class="text-title">随访进度：</text>
                <view class="margin-top-sm">
                  <uni-steps :options="item.stepList" active-color="#007AFF" :active="item.active" direction="column" />
                </view>
              </view>
              <!-- 完善按钮 -->
              <view class="content-container margin-top-sm">
                <button class="cu-btn bg-cyan" :disabled="item.visitStatus === 1" @click="clickItem(item)">
                  完善随访</button>
                <button class="cu-btn margin-left-xl" @click="goDetail(item)">随访详情</button>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </uni-section>
    </view>
    <view style="height: 20px;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        paramObj: {
          pageNum: 1,
          pageSize: 10,
          subId: undefined
        },
        visitList: [],
        firstLoad: true,
        total: 0,
        isLoading: false
      };
    },
    // 初始化获取数据
    onShow() {
      if (!this.firstLoad) {
        this.resetData();
        this.loadMoreData();
      }
    },
    beforeDestroy() {
      this.visitList = [];
    },
    methods: {
      // 跳转到顶部
      scrollToTop() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 0, // 设置一个很大的值，确保滚动到底部
            duration: 100, // 滚动动画的时长
          });
        })
      },
      // 跳转到底部
      scrollToBottom() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 9999, // 设置一个很大的值，确保滚动到底部
            duration: 300, // 滚动动画的时长
          });
        })
      },
      // 下拉重载方法
      onPullDownRefresh() {
        // 重新加载数据
        this.resetData();
        this.loadMoreData();
      },
      // 滚动到底部
      onReachBottom() {
        // 当滚动到底部时触发上拉加载更多
        this.loadMoreData();
      },
      // 加载更多数据
      loadMoreData() {
        //console.log('调用函数2');
        // 如果已经没有更多数据或正在加载中，则不再进行加载
        if (this.paramObj.pageNum !== 1 && this.visitList.length >= this.total) {
          uni.$showMsg('数据已加载完毕!');
          return;
        } else if (this.isLoading) {
          uni.$showMsg('正在玩命加载中!');
          return;
        }
        this.fetchData();
      },
      // 重新赋值
      resetData() {
        this.visitList = [];
        this.total = 0;
        this.paramObj.pageNum = 1;
      },
      changeSub(subId) {
        //console.log("调用函数1，subId=",subId);
        this.paramObj.subId = subId;
        this.resetData();
        this.loadMoreData();
        this.scrollToTop();
      },
      // 前往随访细节页面
      goDetail(item) {
        uni.navigateTo({
          url: `/subpkg/follow_detail/follow_detail?id=${item.id}&title=${item.visitTitle}`
        })
      },
      // 完成随访
      clickItem(item) {
        uni.navigateTo({
          url: `/subpkg/follow_form/follow_form?id=${item.id}&title=${item.visitTitle}`
        })
      },
      async fetchData() {
        //console.log('调用函数3');
        if (!this.paramObj.subId) {
          return;
        }
        //console.log('调用函数4');
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/visit/list', this.paramObj)
        // 判断是否获取失败
        if (res.code !== 200) {
          this.isLoading = false; // 标记为加载完成
          return uni.$showMsg(res.msg);
        }
        if (this.paramObj.pageNum === 1) {
          // 下拉重载，清空原有数据
          this.visitList = res.data.list;
        } else {
          // 上拉加载，追加数据
          this.visitList = [...this.visitList, ...res.data.list];
          this.scrollToBottom();
        }
        //console.log(this.visitList)
        this.total = res.data.totalCount;
        this.paramObj.pageNum++;
        this.isLoading = false; // 标记为加载完成
        if (this.firstLoad) {
          // 解除第一次加载
          this.firstLoad = false;
        }
      }
    }
  }
</script>

<style lang="scss">
  // 容器头
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }



  // 随访列表样式
  .visit-list {
    position: relative;
    margin-top: 20px;

    .content {
      .content-container {
        display: flex;
        align-items: center;

        .text-title {
          color: #333;
          margin-right: 5px;
          font-size: 13px;
        }

        .text-content {
          font-size: 13px;
          color: #666;
        }

      }
    }

    .decoration {
      width: 6px;
      height: 6px;
      margin-right: 4px;
      border-radius: 50%;
      background-color: #1cbbb4;
    }
  }
</style>